<template>
  <div style="background-color: #f6f7fa">
    <!-- 背景图片 -->
    <div class="content_background">
      <div></div>
    </div>
    <div style="padding: 16px">
      <!-- 退休计算 -->
      <div class="retire_money">
        <!-- 标题 -->
        <div class="title">
          <div class="title_h">先来看一下,</div>
          <div class="title_h_brother">
            <img src="../../assets/icon/3.0.3.png" class="title_h_img" />
            <div class="title_h_bottom">退休要准备多少钱</div>
            <img src="../../assets/icon/3.0.2.png" class="title_h_img" />
          </div>
        </div>
        <!-- 分类 -->
        <div class="classify">
          <div>
            <div class="classify_title">退休后日常开销</div>
            <div class="classify_money_father">
              <div class="dispaly_f" @click="showPopup(0)">
                <div class="classify_money">{{ moneyWan }}</div>
                <div class="dispaly_f_a">
                  <div class="classify_money_brother">万</div>
                  <img src="../../assets/icon/3.0.4.png" class="img_w_h_16" />
                </div>
              </div>
              <img src="../../assets/icon/3.0.5.png" class="img_w_h_56" />
            </div>
          </div>
          <div>
            <div class="classify_title">请保姆照顾生活</div>
            <div class="classify_money_father">
              <div class="dispaly_f" @click="showPopup(1)">
                <div class="classify_money">{{ moneyWan1 }}</div>
                <div class="dispaly_f_a">
                  <div class="classify_money_brother">万</div>
                  <img src="../../assets/icon/3.0.4.png" class="img_w_h_16" />
                </div>
              </div>
              <img src="../../assets/icon/3.0.6.png" class="img_w_h_56" />
            </div>
          </div>
          <div>
            <div class="classify_title">住养老院</div>
            <div class="classify_money_father">
              <div class="dispaly_f" @click="showPopup(2)">
                <div class="classify_money">{{ moneyWan2 }}</div>
                <div class="dispaly_f_a">
                  <div class="classify_money_brother">万</div>
                  <img src="../../assets/icon/3.0.4.png" class="img_w_h_16" />
                </div>
              </div>
              <img src="../../assets/icon/3.0.7.png" class="img_w_h_56" />
            </div>
          </div>
          <div>
            <div class="classify_title">生活费</div>
            <div class="classify_money_father">
              <div class="dispaly_f" @click="showPopup(3)">
                <div class="classify_money">{{ moneyWan3 }}</div>
                <div class="dispaly_f_a">
                  <div class="classify_money_brother">万</div>
                  <img src="../../assets/icon/3.0.4.png" class="img_w_h_16" />
                </div>
              </div>
              <img src="../../assets/icon/3.0.8.png" class="img_w_h_56" />
            </div>
          </div>
        </div>
        <!-- 计算标题 -->
        <div class="calculate_title" style="width: 280px; justify-content: center">
          <div class="calculate_text">预计退休后需要准备</div>
          <div
            class="calculate_money"
          >
            {{ moneyWan + moneyWan1 + moneyWan2 + moneyWan3 }}
          </div>
          <div class="calculate_money_text">万元</div>
        </div>
        <!-- 计算说明 -->
        <div class="calculate_content">上述计算，完全没有考虑通胀，如果加上通膨，上述金额可能会翻倍。</div>
        <!-- 计算按钮 -->
        <!-- <div class="calculate_button">精确计算</div> -->
        <div style="display: flex; justify-content: center">
          <Button type="default" class="calculate_button" plain color="#C51724">精确计算</Button>
        </div>
      </div>
      <!-- 攒养老钱 -->
      <div class="retire_saveUp">
        <!-- 标题 -->
        <div class="title">
          <div style="text-align: center; font-size: 17px; font-weight: 600; color: #16142d">降低消费欲望,</div>
          <div style="display: flex; align-items: center; justify-content: center; margin-top: 3px">
            <img src="../../assets/icon/3.0.3.png" style="width: 33.8px; height: 13px; margin-right: 14px" />
            <div style="font-size: 17px; font-weight: 600; color: #16142d">开启强制储蓄来攒养老钱</div>
            <img src="../../assets/icon/3.0.2.png" style="width: 33.8px; height: 13px; margin-left: 14px" />
          </div>
        </div>
        <!-- 攒钱计划背景 -->
        <div class="plan_background">
          <div
            style="
              display: flex;
              align-items: center;
              border-top: 1px solid #c51724;
              border-bottom: 1px solid #c51724;
              height: 34px;
              margin-left: 21px;
            "
          >
            <div style="font-size: 30px; font-weight: 700; margin-right: 4px; font-family: DINAlternate-Bold">630</div>
            <div style="font-size: 14px; font-weight: 600; margin-right: 10px">万元</div>
            <div style="font-size: 14px; font-weight: 600">攒钱计划</div>
          </div>
          <img src="../../assets/icon/3.0.9.png" style="width: 142px; height: 76px" />
        </div>
        <!-- 攒钱计划 -->
        <div class="plan_money">
          <div
            v-for="(item, index) in PlanMoneyList"
            :key="index"
            :class="{ active: activeIndex == index }"
            @click="activeIndex = index"
          >
            {{ item.title }}
          </div>
        </div>
        <div v-for="(item, index) in PlanMoneyList" v-show="activeIndex == index" :key="index" class="plan_content_box">
          <div class="plan_content">
            <div>储蓄金额</div>
            <div>
              <span style="font-size: 18px; font-weight: 700; font-family: DINAlternate-Bold; margin-right: 8px">{{
                item.money
              }}</span
              ><span>元/天</span>
            </div>
          </div>
          <div class="plan_content" style="margin-top: 8px">
            <div>储蓄时间</div>
            <div>
              <span style="font-size: 18px; font-weight: 700; font-family: DINAlternate-Bold; margin-right: 8px">{{
                item.time
              }}</span
              ><span>年</span>
            </div>
          </div>
        </div>
        <!-- 注意事项 -->
        <div
          style="
            font-size: 10px;
            color: #9d9baf;
            margin-top: 16px;
            margin-left: 8px;
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.9);
          "
        >
          注：上述计算基于年化投资收益率5%的假设。
        </div>
        <div style="display: flex; justify-content: center">
          <Button type="default" class="plan_money_button" plain color="#C51724">去记账监督我强制储蓄</Button>
        </div>
      </div>
      <!-- 攒钱说明 -->
      <div class="retire_saveUp_explain">
        <img src="../../assets/icon/3.0.11.png" style="width: 343px; height: 174px" />
      </div>
      <!-- 投资方式 -->
      <div class="invest_way">
        <!-- 标题 -->
        <div class="title">
          <div style="text-align: center; font-size: 17px; font-weight: 600; color: #16142d">选择稳健的投资方式</div>
          <div style="display: flex; align-items: center; justify-content: center; margin-top: 3px">
            <img src="../../assets/icon/3.0.3.png" style="width: 33.8px; height: 13px; margin-right: 55px" />
            <div style="font-size: 17px; font-weight: 600; color: #16142d">跑赢通胀</div>
            <img src="../../assets/icon/3.0.2.png" style="width: 33.8px; height: 13px; margin-left: 55px" />
          </div>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <img src="../../assets/icon/3.0.14.png" style="width: 144px; height: 78px; margin-bottom: -4px" />
            <div class="invest_way_background">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding-top: 20px;
                  margin-bottom: 36px;
                "
              >
                <div style="font-size: 16px; color: #ffffff">养老基金</div>
                <img src="../../assets/icon/3.0.17.png" style="width: 16px; height: 16px; margin-left: 4px" />
              </div>
              <div style="font-size: 14px; text-align: center; font-weight: 500">
                <div>专业投资</div>
                <div>着眼长期收益</div>
              </div>
            </div>
          </div>
          <div>
            <img src="../../assets/icon/3.0.15.png" style="width: 144px; height: 78px; margin-bottom: -4px" />
            <div class="invest_way_background">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding-top: 20px;
                  margin-bottom: 36px;
                "
              >
                <div style="font-size: 16px; color: #ffffff">年金保险</div>
                <img src="../../assets/icon/3.0.17.png" style="width: 16px; height: 16px; margin-left: 4px" />
              </div>
              <div style="font-size: 14px; text-align: center; font-weight: 500">
                <div>稳健配置</div>
                <div>老有所依</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 友情提示 -->
      <div class="hint">
        <div class="hint_t_backgrount">友情提示:</div>
        <div
          style="
            padding-left: 16px;
            padding-right: 16px;
            font-size: 12px;
            line-height: 24px;
            font-weight: 500;
            margin-top: 16px;
          "
        >
          提前退休的时候，要看一下养老金的缴费时长，如果没有够15年，在退休时领取不到养老金。
        </div>
        <div class="hint_t_icon"></div>
      </div>
    </div>
    <!--  热门话题  -->
    <div class="hotTopic">
      <div style="font-size: 19px; font-weight: 500">热门话题</div>
      <div v-for="(item, index) in hotTopicList" :key="index" class="hotTopic_content">
        <div>
          <div style="font-size: 14px">{{ item.title }}</div>
          <div style="display: flex; font-size: 12px; margin-top: 12px">
            <div style="color: #5c587a">{{ item.source }}</div>
            <div style="margin-left: 16px; color: #5c587a">{{ item.read }}</div>
          </div>
        </div>
        <img src="../../assets/icon/3.0.13.png" style="width: 64px; height: 64px; border-radius: 8px" />
      </div>
    </div>
    <Popup
      v-model:show="show"
      :close-on-click-overlay="false"
      round
      position="bottom"
      overlay="false"
      close-icon-position="top-left"
      :style="{ height: '460px' }"
    >
      <div style="height: 53px; line-height: 53px; display: flex; justify-content: space-around">
        <div style="font-size: 15px; color: #5c587a" @click="cancel">取消</div>
        <div v-if="isShow == 0" style="font-size: 17px; color: #16142d">退休后日常开销</div>
        <div v-if="isShow == 1" style="font-size: 17px; color: #16142d">请保姆照顾生活</div>
        <div v-if="isShow == 2" style="font-size: 17px; color: #16142d">住院养老</div>
        <div v-if="isShow == 3" style="font-size: 17px; color: #16142d">生活费</div>
        <div style="font-size: 15px; color: #16142d" @click="affirm">确认</div>
      </div>
      <div style="background: #f6f7fa; height: 407px; display: flex; align-items: center; flex-direction: column">
        <div
          v-if="isShow == 0"
          class="Popup_text"
        >
          退休后至终老的整个阶段，都会有日常开销的费用，这部分费用会在前期较高，后期较低，为计算方便，我们可以考虑一个平均值。可根据您的情况进行填写。
        </div>
        <div
          v-if="isShow == 1"
          class="Popup_text"
        >
          在70-80岁这个阶段，考虑到身体机能的下降，可能会产生专人照顾的费用，这部分的费用，可根据您能负担的情况进行填写。
        </div>
        <div
          v-if="isShow == 2"
          class="Popup_text"
        >
          在80-90岁这个阶段，考虑到身体情况的变化，可能会考虑居住养老院来获得更加全面的照顾。这部分的费用，可根据您能负担的情况进行填写。
        </div>
        <div
          v-if="isShow == 3"
          class="Popup_text"
        >
          如果您有提前5年退休的打算，那这5年的生活费用，也需要提前准备出来。您可以根据您的需求情况进行填写。
        </div>
        <div style="width: 327px; height: 202px; overflow: hidden; margin-top: 24px">
          <Picker
            v-if="isShow == 0"
            v-model="selectedValues"
            style="margin-top: -50px"
            :columns="columns"
            :show-toolbar="false"
            :option-height="48"
            @change="onChange"
          />
          <Picker
            v-if="isShow == 1"
            v-model="selectedValues1"
            style="margin-top: -50px"
            :columns="columns"
            :show-toolbar="false"
            :option-height="48"
            @change="onChange1"
          />
          <Picker
            v-if="isShow == 2"
            v-model="selectedValues2"
            style="margin-top: -50px"
            :columns="columns"
            :show-toolbar="false"
            :option-height="48"
            @change="onChange2"
          />
          <Picker
            v-if="isShow == 3"
            v-model="selectedValues3"
            style="margin-top: -50px"
            :columns="columns"
            :show-toolbar="false"
            :option-height="48"
            @change="onChange3"
          />
        </div>
        <div v-if="isShow == 0" class="calculate_title">
          <div class="calculate_text">60-95岁, 35年共计</div>
          <div
            class="calculate_money"
          >
            {{ moneyWan }}
          </div>
          <div class="calculate_money_text">万元</div>
        </div>
        <div v-if="isShow == 1" class="calculate_title">
          <div class="calculate_text">70-80岁，10年共计</div>
          <div
            class="calculate_money"
          >
            {{ moneyWan1 }}
          </div>
          <div class="calculate_money_text">万元</div>
        </div>
        <div v-if="isShow == 2" class="calculate_title">
          <div class="calculate_text">80-90岁，10年共计</div>
          <div
            class="calculate_money"
          >
            {{ moneyWan2 }}
          </div>
          <div class="calculate_money_text">万元</div>
        </div>
        <div v-if="isShow == 3" class="calculate_title">
          <div class="calculate_text">提前5年退休，5年共计</div>
          <div
            class="calculate_money"
          >
            {{ moneyWan3 }}
          </div>
          <div class="calculate_money_text">万元</div>
        </div>
      </div>
    </Popup>
  </div>
</template>

<script setup>
import { Button } from 'vant'
import { Popup } from 'vant'
import { Toast } from 'vant'
import { Picker } from 'vant'
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
console.log('326598',window.xsy);
// 选择器
const columns = []
onMounted(() => {
  for (let i = 0; i < 1000; i++) {
    columns.push({
      text: 1000 * i,
      value: 1000 * i,
    })
  }
})
// 热门话题
const hotTopicList = ref([
  {
    title: '2021全球疯狂印钞，中国家庭资产配置走向何处？',
    source: '媒体来源',
    read: '1789阅读',
    url: '../../assets/icon/3.0.13.png',
  },
  {
    title: '还在“骗”孩子上交压岁钱吗？你可能错失了一场财商教育的好机会',
    source: '媒体来源',
    read: '1789阅读',
    url: '../../assets/icon/3.0.13.png',
  },
  {
    title: '探索大湾区｜加速打造中国新养老中心',
    source: '媒体来源',
    read: '1789阅读',
    url: '../../assets/icon/3.0.13.png',
  },
  {
    title: '财富锦囊 ｜ 从财富规划开始，为子女教育铺路',
    source: '媒体来源',
    read: '1789阅读',
    url: '../../assets/icon/3.0.13.png',
  },
  {
    title: '退休图鉴洞察｜总有一种养老方式适合你',
    source: '媒体来源',
    read: '1789阅读',
    url: '../../assets/icon/3.0.13.png',
  },
])
let isShow = ref(null)
const PlanMoneyList = ref([
  {
    title: '每日计划',
    money: '5',
    time: '20',
  },
  {
    title: '每周计划',
    money: '10',
    time: '40',
  },
  {
    title: '双周计划',
    money: '15',
    time: '50',
  },
  {
    title: '月度计划',
    money: '100',
    time: '3000',
  },
])
let activeIndex = ref(0)
const show = ref(false)
// 打开弹出层
const showPopup = (e) => {
  isShow.value = e
  show.value = true
}
// 关闭弹出层
const cancel = () => {
  show.value = false
  moneyWan.value = 210
  moneyWan1.value = 60
  moneyWan2.value = 90
  moneyWan3.value = 30
}
let moneyWan = ref(210)
let moneyWan1 = ref(60)
let moneyWan2 = ref(90)
let moneyWan3 = ref(30)
const onChange = ({ selectedValues }) => {
  console.log(selectedValues.join(','))
  moneyWan.value = (selectedValues.join(',') * 420).toFixed(2) / 10000
}
const onChange1 = ({ selectedValues }) => {
  console.log(selectedValues)
  moneyWan1.value = (selectedValues.join(',') * 120).toFixed(2) / 10000
}
const onChange2 = ({ selectedValues }) => {
  console.log(selectedValues.join(','))
  moneyWan2.value = (selectedValues.join(',') * 180).toFixed(2) / 10000
}
const onChange3 = ({ selectedValues }) => {
  console.log(selectedValues.join(','))
  moneyWan3.value = (selectedValues.join(',') * 60).toFixed(2) / 10000
}
// 确认按钮
const affirm = () => {
  show.value = false
}
const selectedValues = ref([5000])
const selectedValues1 = ref([5000])
const selectedValues2 = ref([5000])
const selectedValues3 = ref([5000])
</script>
<script>
import { defineComponent } from 'vue'
export default defineComponent({})
</script>

<style scoped>
@import url(./style/PensionCalculate.css);
* {
  box-sizing: border-box;
  font-family: 'PingFangSC-Regular';
  color: #16142d;
}
</style>